<template>
	<!-- 我的 -->
	<view class="content">
		<scroll-view scroll-y class="scroll-box">
			<!-- 头部 -->
			<view class='head'>
				<image class="bgImg" src="../../static/image/user-center-bgimg.png"></image>
				<!-- 个人信息 -->
				<view class="head-cont" @tap="pageChangeUserCenterNew">
					<view class="head-cont-item1">
						<image :src="imgUrl"></image>
					</view>
					<view class="head-cont-item2">
						<view class="name">
							<text>{{user_name}}</text>
							<view class="level-wrap">
								<!--  @tap.stop="level"-->
								<image :src="user_level"></image>
								<view class="grade">8</view>
							</view>
						</view>
					</view>
					<view class="head-cont-item3" @tap.stop="index">
						进入主页<i class='iconfont iconjiantou' style="color: #ffffff"></i>
					</view>
				</view>
			</view>
			<!-- 菜单 -->
			<view class="cbox">
				<view class="row-cont">
					<navigator hover-class="none" class="row-cont-item" url="sign">
						<i class="iconfont iconqiandao_mian qiandao"></i>
						<view class="row-cont-item-til">签到</view>
					</navigator>
					<navigator hover-class="none" class="row-cont-item" url="../child/my-children?type=2">
						<i class="iconfont iconhaizi_mian xuexi"></i>
						<view class="row-cont-item-til">我孩</view>
					</navigator>
					<navigator hover-class="none" class="row-cont-item" url="child-condition">
						<i class="iconfont iconrenwu_mian renwu"></i>
						<view class="row-cont-item-til">学情</view>
					</navigator>
					<navigator class="row-cont-item" hover-class="none" url="../quesAndAnswer/interact" open-type="switchTab">
						<i class="iconfont iconwenti1 hudong"></i>
						<view class="row-cont-item-til">智互</view>
					</navigator>
					<navigator hover-class="none" class="row-cont-item" url="./inform/inform-list">
						<i class="iconfont icontongzhi_mian tongzhi"></i>
						<view class="pluls_text" v-if="notice_num>0">{{notice_num}}</view>
						<view class="row-cont-item-til">通知</view>
					</navigator>
				</view>
			</view>

			<view class="card" @click="gotocaard" style="background-image: url(../../static/image/card.png);">
				<view class="card_title">VIP会员限时抢购</view>
				<view class="car_time">
					<uni-count-down color="#FF9900" splitorColor="#fff" v-if="isShow" :stop='stop' :show-day="false" :hour="myHour"
					 :minute="myMinute" :second="mySecond" @over="over" />
				</view>
			</view>

			<!-- 列表记录 等 设置 -->
			<view class="contAll">
				<view class="cont">
					<navigator class="cont_cbox" hover-class="none" :url="'../child/change_groups?student_id='+student_id+'&is_exam_type=1'">
						<view class="dis-flex">
							<i class="iconfont iconlianxi"></i>
							<view class="item-text">作业记录</view>
						</view>
						<i class="iconfont iconjiantou"></i>
					</navigator>
					<navigator class="cont_cbox" hover-class="none" :url="'../child/drill-impression?student_id='+student_id">
						<view class="dis-flex">
							<i class="iconfont iconziliaotongbu"></i>
							<view class="item-text">同步记录</view>
						</view>
						<i class="iconfont iconjiantou"></i>
					</navigator>
					<navigator class="cont_cbox" hover-class="none" :url="'../qulian/practice-records?student_id='+student_id">
						<view class="dis-flex">
							<i class="iconfont iconxunlian"></i>
							<view class="item-text">趣练记录</view>
						</view>
						<i class="iconfont iconjiantou"></i>
					</navigator>
					<navigator class="cont_cbox" hover-class="none" url="../psq/newtestilist">
						<view class="dis-flex">
							<i class="iconfont icondingdan"></i>
							<view class="item-text">我的测验报告</view>
						</view>
						<i class="iconfont iconjiantou"></i>
					</navigator>
				</view>
				
				<view class="cont">
					<navigator class="cont_cbox" hover-class="none" url="../tongbu/myResources">
						<view class="dis-flex">
							<i class="iconfont iconmysource"></i>
							<view class="item-text">我的资源</view>
						</view>
						<i class="iconfont iconjiantou"></i>
					</navigator>
					<navigator class="cont_cbox" hover-class="none" url="/pages/personal-note/note">
						<view class="dis-flex">
							<i class="iconfont iconbiji"></i>
							<view class="item-text">我的笔记</view>
						</view>
						<i class="iconfont iconjiantou"></i>
					</navigator>
					<navigator class="cont_cbox" hover-class="none" url="../package/mypackagelist?package_type=2">
						<view class="dis-flex">
							<i class="iconfont iconkebao-xianxing_huaban1"></i>
							<view class="item-text">我的学包</view>
						</view>
						<i class="iconfont iconjiantou"></i>
					</navigator>
					<navigator class="cont_cbox" hover-class="none" url="../classOrder/order-list">
						<view class="dis-flex">
							<i class="iconfont icondingdan"></i>
							<view class="item-text">我的订单</view>
						</view>
						<i class="iconfont iconjiantou"></i>
					</navigator>
					<navigator class="cont_cbox" hover-class="none" url="../order/my_wallet">
						<view class="dis-flex">
							<i class="iconfont iconwallet-"></i>
							<view class="item-text">我的智付</view>
						</view>
						<i class="iconfont iconjiantou"></i>
					</navigator>
				</view>
				
				<view class="cont">
					<navigator class="cont_cbox" hover-class="none" url="../customer-service/customer-service-index">
						<view class="dis-flex">
							<i class="iconfont iconkefu"></i>
							<view class="item-text">客服中心</view>
						</view>
						<i class="iconfont iconjiantou"></i>
					</navigator>
					<navigator class="cont_cbox" hover-class="none" url="setting">
						<view class="dis-flex">
							<i class="iconfont iconshezhi"></i>
							<view class="item-text">设置</view>
						</view>
						<i class="iconfont iconjiantou"></i>
					</navigator>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import uniCountDown from '@/components/uni-count-down/uni-count-down.vue'
	export default {
		data() {
			self = this;
			return {
				imgUrl: this.defimg, // 用户头像路径
				user_level: "../../static/image/user-center-level.png", // 家长等级
				user_name: "", // 家长姓名
				student_id: '',
				myHour: 24,
				myMinute: 60,
				mySecond: 60,
				duration: 0,
				isShow: true,
				notice_num: 0, //通知数量
				stop: false
			}
		},
		components: {
			uniCountDown
		},
		onNavigationBarButtonTap(e) {
			if (e.index == 0) {
				uni.navigateTo({
					url: 'QR-code'
				})
			} else {
				var _this = this;
				uni.scanCode({
					scanType: ['qrCode'],
					success: function(res) {
						var data = JSON.parse(res.result);
						if (data['type'] == 'gzschool') {
							_this.$zapi.apiPost('user/shakeschool.Users/schoolFollowAdd', { school_id: uni.getStorageSync('currentChild').student_id }).then(res => {
								if (res.data.code == 200) {
									uni.showToast({
										title: '成功关注了'+data.nickname,
										icon: 'none'
									});
								}
							});
						}
					}
				});
			}

		},
		onPullDownRefresh() {
			this.getInfo();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onShow() {
			this.getnoticNum();
			this.getInfo();
			this.$forceUpdate();
		},
		onLoad: function() {
		
		},
		methods: {
			// 获取通知数量
			getnoticNum: function() {
				this.$zapi.apiPost('user/notice.User/noticeBaseNum').then(res => {
					if (res.data.code == 200) {
						this.notice_num = res.data.data.notice_num;
					}
				});
			},
			/* 获取用户信息 */
			getInfo() {
				var currentChild = uni.getStorageSync('currentChild');
				this.student_id = currentChild.student_id
				// 初始化获取用户数据信息
				this.$zapi.apiPost('user/currency.basic/GetUserInfo').then(res => {
					if (res.data.code == 200) {
						var data = res.data.data;
						this.user_name = data.nicheng
						if (this.user_name == '') {
							this.user_name = "未设置昵称"
						}
						// 设置头像
						this.imgUrl = data.avatar == '' ? this.imgUrl : data.avatar;
					}
				});
			},
			// 跳转作业记录
			linkWorkLog() {
				uni.navigateTo({
					url: `../child/change_groups?student_id=${this.student_id}&is_exam_type=${1}`,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			// 跳转通知
			linkInform() {
				uni.navigateTo({
					url: './inform/inform-list'
				})
			},
			// 跳转个人信息
			pageChangeUserCenterNew() {
				uni.navigateTo({
					url: '../personInfo/personInfo'
				})
			},
			/* 同步 */
			tongbu() {
				uni.navigateTo({
					url: '../child/drill-impression?student_id=' + this.student_id
				})
			},
			/* 趣练 */
			qulian() {
				uni.navigateTo({
					url: '../qulian/practice-records?student_id=' + this.student_id
				})
			},
			/* 暂未开通 */
			none() {
				uni.showToast({
					title: '该功能暂未开通',
					icon: 'none'
				})
			},
			/* 等级中心 */
			level() {
				uni.navigateTo({
					url: 'level-center'
				})
			},
			// 打开二维码
			QRcode() {
				uni.navigateTo({
					url: './QR-code'
				})
			},
			// 我的笔记
			linkMyNote() {
				uni.navigateTo({
					url: `/pages/personal-note/index`
				})
			},
			/* 进入主页 */
			index() {
				uni.navigateTo({
					url: '/pages/school/my-center?users_type=3'
				})
			},
			gotocaard: function() {
				uni.navigateTo({
					url: '../member/card'
				})
			},
			over: function() {

			}
		}
	}
</script>

<style>
	page {
		background: #F7F7F7;
	}

	.name {
		display: flex;
		font-size: 38upx;
		color: #ffffff;
		font-weight: bold;
	}

	.name .level-wrap {
		display: flex;
		margin-left: 10upx;
		align-items: center;
	}

	.level-wrap image {
		width: 44upx;
		height: 36upx;
	}

	.name .bg-grade {
		height: 30upx;
		line-height: 28upx;
		text-align: center;
		color: #fff;
		font-size: 24upx;
	}

	.name .grade {
		background: rgba(255, 255, 0, 1);
		height: 28upx;
		line-height: 28upx;
		color: rgba(255, 153, 0, 1);
		padding: 0 16upx 0 8upx;
		margin-left: -6upx;
		line-height: 30upx;
	}

	.school {
		font-size: 30upx;
		color: #ffffff;
		opacity: 0.8
	}

	.content {
		position: absolute;
		width: 100%;
	}

	.head {
		background-size: 100% 100%;
		width: 750upx;
		height: 324upx;
	}

	.bgImg {
		width: 100%;
		height: 324upx;
		background-size: 100% 100%;
	}

	.head-cont {
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		top: 42upx;
		margin: auto 30upx;
		width: 100%;
	}

	.head-cont-item1 {
		border-radius: 120upx;
		width: 120upx;
		height: 120upx;
	}

	.head-cont-item1 image {
		max-width: 120upx;
		max-height: 120upx;
		border-radius: 50%;
	}

	.head-cont-item2 {
		display: flex;
		flex-direction: column;
		flex: 1;
		margin-left: 30upx;
	}

	.head-cont-item3 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 120upx;
		position: relative;
		right: 60upx;
		color: #FFFFFF;
	}

	.qiandao {
		background-image: -webkit-linear-gradient(270deg, #29E2B6, #00D5A2);
	}

	.xuexi {
		background-image: -webkit-linear-gradient(270deg, #FFC46B, #FF9900);
	}

	.renwu {
		background-image: -webkit-linear-gradient(270deg, #C598FF, #A665FB);
	}

	.hudong {
		background-image: -webkit-linear-gradient(270deg, #FF6D84, #FF83BD);
	}

	.tongzhi {
		background-image: -webkit-linear-gradient(270deg, #67CEFF, #00ACFE);
	}
	
	.pluls_text {
		height: 24upx;
		border-radius: 28upx;
		background: #fc302a;
		position: absolute;
		top: 49upx;
		right: 40upx;
		color: #FFFFFF;
		text-align: center;
		font-size: 16upx;
		line-height: 25upx;
		padding: 4upx 10upx;
	}

	.cbox {
		position: relative;
		top: -130upx;
		margin-left: auto;
		margin-right: auto;
		width: 690upx;
		background-color: #ffffff;
		border-radius: 20upx;
		color: #333333;
		overflow: hidden;
	}

	.row-cont {
		height: 220upx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.row-cont .iconfont {
		font-size: 66upx;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		text-align: center;
		line-height: 118upx;
	}

	.row-cont-item {
		display: inline-flex;
		flex-direction: column;
		width: 20%;
		height: 178upx;
	}


	.row-cont-item-til {
		margin-top: -10upx;
		text-align: center;
		color: #333333;
		font-size: 30upx;
	}

	/* 会员卡 */
	.card {
		height: 106upx;
		position: relative;
		top: -136upx;
		margin-left: auto;
		margin-right: auto;
		width: 618upx;
		border-bottom-right-radius: 20upx;
		border-bottom-left-radius: 20upx;
		color: #333333;
		/* height: 300upx; */
		overflow: hidden;
		background-size: 100% 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;

	}

	.card_title {
		width: 60%;
		text-align: center;
		color: #FFFFFF;
		font-size: 35upx;
	}

	.car_time {
		width: 40%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 21upx;
	}

	.uni-countdown__number {
		height: 25upx !important;
		line-height: 25upx !important;
	}

	.uni-countdown__splitor {
		line-height: 25upx !important;
	}
	
	/* 记录模块 */
	.contAll{
		position: relative;
		top: -130upx;
		margin: 0 30upx;
		width: calc(100% - 60upx);
	}
	.cont {
		background-color: #FFFFFF;
		margin-top: 16upx;
		border-radius: 20upx;
	}
	
	.cont_cbox {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100upx;
		padding: 0 40upx;
		width: calc(100% - 60upx);
		border-bottom: 2upx solid #F3F3F3;
	}
	
	.cont .cont_cbox:last-child {
		border-bottom: none;
	}
	
	.dis-flex {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	
	.cont_cbox i {
		width: 50upx;
		font-size: 50upx;
		text-align: center;
		margin-right: 20upx;
	}
	
	.dis-flex .item-text {
		color: #333333;
		font-size: 34upx;
	}
	
	.iconjiantou {
		color: #999999;
		font-size: 36upx !important;
		margin: 0 !important;
	}
	
	.iconlianxi,
	.iconmysource,
	.iconbiji,
	.iconkebao-xianxing_huaban1,
	.icondingdan,
	.iconwallet-
	{
		color: #00D5A2;
	}
	
	.iconziliaotongbu,
	.iconxunlian{
		color: #00ACFE;
	}
	
	.iconkefu{
		color: #588CD6;
	}
	
	.iconshezhi{
		color: #B591E8;
	}
	.iconlianxi{
		font-size: 44upx;
	}
</style>
